import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
// 引入antd的按钮组件
import { Button, Table, Tag, Space } from 'antd';

class SongList extends Component {
  constructor() {
    super()
    this.state = {
      songList: [],
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: text => <a>{text}</a>,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: 'Tags',
          key: 'tags',
          dataIndex: 'tags',
          render: tags => (
            <>
              {tags.map(tag => {
                let color = tag.length > 5 ? 'geekblue' : 'green';
                if (tag === 'loser') {
                  color = 'volcano';
                }
                return (
                  <Tag color={color} key={tag}>
                    {tag.toUpperCase()}
                  </Tag>
                );
              })}
            </>
          ),
        },
        {
          title: 'Action',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              <a>Invite {record.name}</a>
              <a>Delete</a>
            </Space>
          ),
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ]
    }
  }
  componentWillMount() {
    this.$axios.get('/api/personalized/newsong')
      .then(res => {
        // 通过setState赋值
        this.setState({
          songList: res.data.result
        })
      })
      .catch(err => {
        console.log(err);
      })
  }
  render() {
    return (
      <div>
         <Button type="primary">华语金曲</Button>
        <ul>
          {
            this.state.songList.map((item, index) => {
              return (
              <li key={index}>
                <NavLink to={"/songdetail/"+item.id}>{item.name}-{item.song.artists[0].name}</NavLink>
              </li>)
            })
          }
        </ul>
        <Table columns={this.state.columns} dataSource={this.state.data} />
      </div>
    );
  }
}

export default SongList;
